<!-- 显示书籍阅读记录信息 -->
<template>
  <el-container v-if="view" >
    <el-aside width="120px" @click="selectBook">
      <el-image class="book-img" :src="bookInfo.imgUrl"></el-image>
    </el-aside>
    <el-main @click="selectBook">
      <!-- Book's Information -->
      <p class="book-name">{{ bookInfo.name }}</p>
      <div>阅读到第{{ bookInfo.chapterNum }}章</div>
    </el-main>
    <el-button style="z-index: 80;" @click="removeShelf">移出书架</el-button>
  </el-container>
</template>

<script>
import { ref, defineComponent } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { removeFromBookshelf } from "@/api/axios/Bookshelf"
import { useStore } from "vuex"
import { CODE_KEY, CODE_SUCCESS } from "@/api/params"
import { ElMessage } from "element-plus"

export default defineComponent({
  props: {
    bookInfo: {
      id: String,
      name: String,
      imgUrl: String,
      chapterNum: String | Number,
      updated: Date
    }
  },
  setup (props) {
    
    const router = useRouter()
    const route = useRoute()
    const store = useStore()
    
    // 点击作者名，跳转到 显示作者作品页面
    const viewAuthor = (bookId) => {
      console.log("click author")
    }
    
    // 点击 书籍，进入书籍信息页面
    const selectBook = () => {
      router.push(`/book/${props.bookInfo.id}/${props.bookInfo.chapterNum}`)
    }
    
    const view = ref(true)
    
    const removeShelf = () => {
      
      let username = store.getters.getUserInfo.username
      if(!username) {
        // 弹出登录框
        loginDialogState.visible = true
        return;
      }
      removeFromBookshelf(username, props.bookInfo.id).then(res => {
        if(res && res.data[CODE_KEY] === CODE_SUCCESS) {
          // 删除 书架 LocalStorage 记录
          store.commit("removeShelfRecord", { bookId: props.bookInfo.id })
          // 提示移除成功
          ElMessage.success("移除成功")
          // 删除显示的书籍信息
          view.value = false
        }
      })
    }
    
    return {
      viewAuthor,
      selectBook,
      view,
      removeShelf,
    }
  }
  
})
</script>

<style scoped>
.el-main {
  /* 书籍信息字体大小 */
  font-size: 10px;
}
.book-short-desc{
  display:-webkit-box;
  text-overflow:ellipsis;
  overflow:hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient:vertical;
  
  color: #666;
}
.el-container {
  cursor: pointer;
}
.book-name {
  font-size: 13px;
  font-weight: bold;
}
.book-author{
  color: #999999;
}
.book-desc {
  word-break: break-word;
  width: 230px;
}
/* img 外 div */
.book-img {
  /* border: 1px #8B4513 solid; */
  vertical-align: middle;
  position: absolute;
  width: 80%;
  height: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.el-aside {
  vertical-align: middle;
  /* 相对位置，为了 .book-img 使用绝对位置进行居中 */
  /* border: 1px #7CFC00 solid; */
  position: relative;
  overflow: hidden;
}
.el-container {
  height: 180px;
}
</style>

<style>
div.book-img > .el-image__inner {
  object-fit: scale-down;
}
</style>

